<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-06-16 10:58:06
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:23:33
-->
<template>
  <div class="app-container">
    <div class="range">
      <ul>
        <li><el-radio v-model="radio" label="2">全部</el-radio></li>
        <li><el-radio v-model="radio" label="3">本部门</el-radio></li>
        <li><el-radio v-model="radio" label="4">本部门及下属</el-radio></li>
        <li><el-radio v-model="radio" label="5">本人</el-radio></li>
        <li><el-radio v-model="radio" label="6">本人及下属</el-radio></li>
      </ul>
      <el-button type="primary" size="default" @click="onSubmit">
        确定
      </el-button>
    </div>
  </div>
</template>

<script>
import { checkRole, dataScope } from "@/api/sys";
export default {
  props: {
    roleId: {
      type: Number,
      required: true,
    },
  },
  watch: {
    roleId(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.getRole();
      }
    },
    // radio(nval, oval) {
    //   if (oval !== null && nval !== oval) {
    //
    //   }
    // },
  },
  data() {
    return {
      radio: null,
    };
  },
  created() {
    this.getRole();
  },
  methods: {
    onSubmit() {
      dataScope({
        dataScope: this.radio,
        roleId: this.roleId,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getRole();
      });
    },
    getRole() {
      checkRole({
        roleId: this.roleId,
      }).then((res) => {
        this.radio = res.data.dataScope;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  .range {
    margin-top: 34px;
    width: 491px;
    height: 264px;
    background: #f8fafd;
    ul {
      margin-top: 24px;
    }
    li {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2b2b2b;
      list-style-type: none;
      margin-bottom: 34px;
    }
  }
}
</style>